<template>
  <div class="container">
    <div class="message">服务客户人数：{{guestnum}}人</div>
    <ul class="record_ul">
      <li class="flex record_li" v-for="item in list" :key="item.guestid" @tap="gotoJiluinfo(item.guestid)" v-if="list.length > 0">
        <div class="pic">
        <img :src="item.guestheadurl === '0' ? '/static/imgs/system_user.png' : item.guestheadurl" >
        </div>
        <div class="words flex-item">
          <span class="objects">
            客户姓名：{{item.name}}
            <span class="sex male_icon" v-if="item.sex==1"></span>
            <span class="sex female_icon" v-else></span>
          </span>
          <span class="time">最近到店时间：{{item.arrivetime}}</span>
        </div>
        <div class="grey_arrow"></div>
      </li>
    </ul>
    <Empty message="暂无服务客户！" v-if="list.length == 0"></Empty>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
// import Toast from '@/utils/toast'
import moment from 'moment'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      list: [],
      guestnum: 0
    }
  },
  async onLoad () {
    await Promise.all([
      this.getList()
    ])
  },
  components: {
    Empty
  },
  computed: {
  },
  methods: {
    async getList () {
      let userid = wx.getStorageSync('params_userid');
      let res = await api.getviewcustomer({ user_id: userid });
      console.log(res)
      if (res.code === '100') {
        res.data.forEach(item => {
          item.arrivetime = moment.unix(item.arrivetime).format('YYYY-MM-DD hh:mm a');
        })
        this.guestnum = res.data.length;
        this.list = res.data
      }
    },
    gotoJiluinfo (id) {
      wx.navigateTo({
        url: '/pages/guest/customerlistdetails/customerlistdetails?id=' + id
      })
    }
  }
}
</script>

<style scoped>
.message {
  width: 100%;
  line-height: 48rpx;
  height: 48rpx;
  color: rgba(102, 102, 102, 1);
  font-weight: 400;
  text-align: center;
  font-size: 20rpx;
  background: #fff;
}
.record_ul {
  width: 100%;
  margin-top: 16rpx;
  padding-left: 33rpx;
  background: #fff;
}
.record_ul li {
  width: 100%;
  padding: 23rpx 0;
  background: #fff;
  position: relative;
}
.record_ul li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rpx;
  background: rgba(153, 153, 153, 0.1);
}
.record_ul li .pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.record_ul li .pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.record_ul li .words span {
  display: block;
}
.record_ul li .words .name {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 10rpx;
}
.record_ul li .words .time,
.record_ul li .words .objects {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-bottom: 10rpx;
}
.grey_arrow {
  position: absolute;
  top: 50%;
  right: 28rpx;
  transform: translateY(-50%);
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
}
.record_ul li .words .objects .sex {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  position: relative;
  top: 7rpx;
  margin-left: 4rpx;
}
.sex.male_icon {
  background: url(http://mytimg.178mr.com/male_icon.png) no-repeat;
  background-size: 100%;
}
.sex.female_icon {
  background: url(http://mytimg.178mr.com/female_icon.png) no-repeat;
  background-size: 100%;
}
.record_ul li .nodo {
  position: absolute;
  top: 50%;
  right: 20rpx;
  transform: translateY(-50%);
  width: 90rpx;
  height: 40rpx;
  border: 2rpx solid #ff4444;
  border-radius: 24rpx;
  text-align: center;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #ff4444;
  font-weight: 400;
}
.record_ul li .grey_arrow {
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
}
</style>
